<template>
  <div :class="$style.whitemodal4">
    <div :class="$style.topBlock">
      <div :class="$style.titleBox">通知管理</div>
      <div :class="$style.btnBox">
        <div :class="$style.btnText">标记已读</div>
        <div :class="$style.btnText">全部删除</div>
      </div>
    </div>
    <div :class="$style.mainBlock">
      <lay-table height="100%" :columns="columnList" :data-source="dataList">
        <template #status="{ row }">
          <div :class="row.name4 == '444' ? $style.colorGreen : $style.colorRed">{{ row.name4 }}</div>
        </template>
        <template v-slot:operator="{ row }">
          <div :class="[$style.colorGreen, $style.tableBtn]">标记已读</div>
          <div :class="[$style.colorRed, $style.tableBtn]">删除</div>
        </template>
      </lay-table>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "WhiteModal4",
  data() {
    return {
      dataList: [
        { name1: '111', name2: '222', name3: '333', name4: '444' },
        { name1: '111', name2: '222', name3: '333', name4: '000' },
      ],
      columnList: [
        { title: '通知标题', width: '', key: 'name1' },
        { title: '内容', width: '', key: 'name2' },
        { title: '时间', width: '', key: 'name3' },
        { title: '状态', width: '', key: 'name4', customSlot: 'status' },
        { title: '操作', width: '', key: 'operator', customSlot: 'operator' },
      ],
    };
  },
  methods: {
    changePage(page) {
      console.log(page)
    },
  }
});
</script>
<style module>
.whitemodal4 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

.topBlock {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.titleBox {
  font-family: Source Han Sans;
  font-size: 18px;
  font-weight: 500;
  color: #000000;
}

.btnBox {
  display: flex;
  align-items: center;
}

.btnText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #13CE66;
  cursor: pointer;
}

.btnText:last-child {
  margin-left: 15px;
}

.mainBlock {
  width: 100%;
  height: calc(100% - 55px);
  box-sizing: border-box;
  padding-bottom: 20px;
}

.colorGreen {
  color: #13CE66;
}

.colorRed {
  color: #EC5B56;
}

.tableBtn {
  cursor: pointer;
}

.tableBtn.colorRed {
  margin-left: 10px;
}
</style>